<template>
  <div>
    <div>
      <el-input
        placeholder="请输入内容"
        v-model="inpunt"
        class="elinput"
        clearable
        @change="select()"
      >
      </el-input>

      <el-button type="primary" @click="select()" class="elinput_btn"
        >查询</el-button
      >
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <!-- --------------------------------------------------------------------------------------- -->
    <!-- 弹窗add增加 -->
    <el-dialog
      title="增加数据"
      :visible.sync="dialogVisible"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!--  :append-to-body='true' 解决蒙版问题 -->
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.a_img"></el-input>
        </el-form-item>
        <el-form-item label="轮播路径">
          <el-input type="textarea" v-model="form.a_imgs"></el-input>
        </el-form-item>
        <el-form-item label="建筑名字">
    
      <el-input  v-model="form.aname"  ></el-input>
    
  </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="form.brief_introduction"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="form.classification"></el-input>
        </el-form-item>
        <el-form-item label="收藏分类">
          <el-input v-model="form.classification_u"></el-input>
        </el-form-item>
        <el-form-item label="年代">
          <el-input v-model="form.dynasty"></el-input>
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="form.region"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLB()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->

    <!-- 弹窗update修改 -->
    <el-dialog
      title="修改图片路径"
      :visible.sync="dialogVisible_up"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.a_img_up"></el-input>
        </el-form-item>
        <el-form-item label="轮播路径">
          <el-input type="textarea" v-model="form.a_imgs_up"></el-input>
        </el-form-item>
        <el-form-item label="建筑名字">
    
      <el-input  v-model="form.aname_up"  ></el-input>
    
  </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="form.brief_introduction_up"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="form.classification_up"></el-input>
        </el-form-item>
        <el-form-item label="收藏分类">
          <el-input v-model="form.classification_u_up"></el-input>
        </el-form-item>
        <el-form-item label="年代">
          <el-input v-model="form.dynasty_up"></el-input>
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="form.region_up"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="updataLB_send()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->
    <!-- --------------------------------------------------------------------------------------- -->

    <template>
      <!--  -->
      <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
      <el-table :data="date.slice((currentPage - 1) * 5, currentPage * 5)" border size="50" style="width: 100%">
        <!-- sortable 是排序 -->
        <el-table-column prop="aid" label="#" width="80" sortable> </el-table-column>
        <!--  -->
        <el-table-column
          prop="a_img"
          label="图片路径"
          size="50"
          min-width="200"
          height="200"
        >
        </el-table-column>
        <el-table-column
          prop="a_imgs"
          label="群组图片路径"
          size="50"
          min-width="200"
          height="200"
        >
        </el-table-column>
        <el-table-column
          prop="aname"
          label="名字"
          size="50"
          min-width="150"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="classification"
          label="分类"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="brief_introduction"
          label="简介"
          size="50"
          min-width="200"
          height="200"
          sortable
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="dynasty"
          label="年代"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="region"
          label="区域"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="updataLB(scope.row)"
              >编辑</el-button
            >

            <!-- 删除确定项 -->
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteLBsend()">
              <el-button slot="reference" type="danger" size="small" @click="deleteLB(scope.row)"
                >删除</el-button
              >
            </el-popconfirm>
            <!-- 删除确定项结束 -->
          </template>
        </el-table-column>
      </el-table>
    </template>
  <!-- 分页 -->
    <el-pagination
  background
  layout="prev, pager, next"
  :total="date.length" class="paging"   
  @current-change="handleCurrentChange"
  :page-size="currenttal"
  >
  
</el-pagination>


  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        a_img: "",
        a_imgs:"",
        aname:"",
        brief_introduction:"",
        classification:"",
        classification_u:'',
        dynasty:'',
        region:'',



          aid_up: "",
         a_img_up: "",
        a_imgs_up:"",
        aname_up:"",
        brief_introduction_up:"",
        classification_up:"",
        classification_u_up:'',
        dynasty_up:'',
        region_up:'',
      },
      deleterid:"",
      
      dialogVisible: false,
      dialogVisible_up: false,
      currentPage: 1,//当前页数
      currenttal:5,//一页多少条数据
      date: [], //刚进来查询
      inpunt: "", //搜索框
    };
  },
  methods: {
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加
    addLB() {
      if (this.form.a_img===""||this.form.a_imgs===""||this.form.aname===""||this.form.brief_introduction===""||this.form.classification===""||this.form.classification_u===""||this.form.dynasty===""||this.form.region==="") {
        alert("输入不能为空");
        return;
      }
      this.axios
        .get(`/architecture/architectureadd?a_img=${this.form.a_img}&a_imgs=${this.form.a_imgs}&aname=${this.form.aname}&brief_introduction=${this.form.brief_introduction}&classification=${this.form.classification}&classification_u=${this.form.classification_u}&dynasty=${this.form.dynasty}&region=${this.form.region}`)
        .then((res) => {
          this.selectUrl();
        });
      this.form.a_img = "";
       this.form.a_imgs="";
       this.form.aname="",
        this.form.brief_introduction=""
        this.form.classification=""
        this.form.classification_u=""
        this.form.dynasty=""
        this.form.region=""
      this.dialogVisible = false;
    },
    // 修改轮播
    updataLB(a) {
      this.dialogVisible_up = true;
      this.form.aid_up=a.aid
      this.form.a_img_up = a.a_img;
      this.form.a_imgs_up = a.a_imgs;
      this.form.aname_up = a.aname;
      this.form.brief_introduction_up = a.brief_introduction;
      this.form.classification_up = a.classification;
      this.form.classification_u_up = a.classification_u;
      this.form.dynasty_up = a.dynasty;
      this.form.region_up = a.region;
    },
    // 修改发送
    updataLB_send() {
      this.axios
        .get(
          `/architecture/architecturedate?aid=${this.form.aid_up}&a_img=${this.form.a_img_up}&a_imgs=${this.form.a_imgs_up}&aname=${this.form.aname_up}&brief_introduction=${this.form.brief_introduction_up}&classification=${this.form.classification_up}&classification_u=${this.form.classification_u_up}&dynasty=${this.form.dynasty_up}&region=${this.form.region_up}`
        )
        .then((res) => {
          this.selectUrl();
        });
      
      this.dialogVisible_up = false;
    },
    // 删除传参
    deleteLB(a){
      this.deleterid=a.aid
    },
    // 删除发送
    deleteLBsend(){
      this.axios.get(`/architecture/architecturedel?aid=${this.deleterid}`).then((res=>{
          this.selectUrl();
      }))
    },
    // 搜索
    select() {
      if (this.inpunt == "") {
        this.selectUrl();
      } else {
        this.axios
          .get(`/architecture/architectureshanSelect?aid=${this.inpunt}`)
          .then((res) => {
            this.date = res.data.data;
          });
      }
    },
    // 查看表单
    selectUrl() {
      this.axios.get("/architecture/architecture").then((res) => {
        this.date = res.data.data;
        console.log(res);
      });
    },

    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$data.currentPage = val
    },



  },
  mounted: function () {
    this.selectUrl();
    console.log(this.date.length);
  },
};
</script>

<style scoped>
.elinput {
  width: auto;
}
.elinput_btn {
  margin-left: 10px;
  
}

.paging{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.el-tooltip__popper{
max-width:50%
}
</style>
